<template>
  <div id="app">
    <router-link to="/home" tag="button" replace>首页</router-link>
    <router-link to="/about" tag="button" replace>关于</router-link>
    <router-link :to="{name: 'Dynamic1' , params:{id:90} }" tag="button" replace>动态路由1</router-link>
    <div class="dv" @click="handles">我就是个普通的div是用来跳转页面的了并传递参数的</div>
    <keep-alive exclude="Dynamic1">
      <router-view></router-view>
    </keep-alive>
  </div>
</template>
<script>
export default {
  name:"App",
  data(){
    return{

  }},
  methods:{
    handles(){
      // 通过名称传递参数
      this.$router.push({name:"/dynamic2",params:{age:100}});
    }
  }
}
</script>
<style lang="less">
.router-link-active {
  color: red;
}
.actives {
  font-size: 2rem;
}
.dv {
  height: 3rem;
  line-height: 3rem;
  margin-left: 1rem;
  background-color: pink;
  cursor: pointer;
  display: inline-block;
}
</style>
